<template>
	<uni-nav-bar :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="返回" title="支付完成预约"
		@clickLeft="back" />
	<view class="pay">
		<view class="pay1">
			<text>老年人体检套餐豪华版(女)</text>
			<text class='text1'>￥
				<text>998</text>
			</text>
			<uni-icons type="forward" size="30"></uni-icons>
		</view>
		<view class="pay1">
			<text>老年人体检套餐豪华版(女)</text>
			<text class='text1'>￥
				<text>998</text>
			</text>
			<uni-icons type="forward" size="30"></uni-icons>
		</view>
		<view class="pay1">
			<text>老年人体检套餐豪华版(女)</text>
			<text class='text1'>￥
				<text>998</text>
			</text>
			<uni-icons type="forward" size="30"></uni-icons>
		</view>
		<view class="pay1 pay1-1">
			<text>老年人体检套餐豪华版(女)</text>
			<text class='text1'>￥
				<text>998</text>
			</text>
			<uni-icons type="forward" size="30"></uni-icons>
		</view>
	</view>
	<view class="exmin">
		<view class="exmin1">
			<text>体检机构</text>
			<view class="exmin1-1" @click="toggle('bottom')" type="primary">
				<text class='text1'>【慈铭】广州体育中心体检中心
				</text>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
		</view>
		<view class="exmin1">
			<text>体检机构</text>
			<view class="exmin1-1" @click="toggle('bottom')" type="primary">
				<text class='text1'>【慈铭】广州体育中心体检中心
				</text>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
		</view>
		<view class="exmin1" @click="open" type="button">
			<text>体检机构</text>
			<view class="exmin1-1" type="primary">
				<text class='text1'>【慈铭】广州体育中心体检中心
				</text>
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
		</view>
	</view>
	<view class="buttons">
		<view class="button2">
			立即预定
		</view>
	</view>

	<!-- 体检机构的弹框 -->
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#7f7f7f" @change="change" mask-background-color='rgba(00,00,00,0.5)'
			is-mask-click='false'>
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="popup-content1">
					<view class='header'>
						选择体检机构
					</view>
					<view class="min">
						<view>
							【慈铭】广州体育中心体检中心
						</view>
					</view>
				</view>
				<view class="button" @click='a'>
					取消
				</view>
			</view>
		</uni-popup>
	</view>
	<!-- 日历 -->
	<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert"
		:lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm"
		@close="close" />

</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref, toRefs } from 'vue'
	const popup = ref(null);
	const calendar = ref(null);
	const type = ref('center')
	const info = reactive({
		lunar: true,
		range: true,
		insert: false,
		selected: []
	})
	// info.selected=[{
	// 					date: getDate(new Date(),-3).fullDate,
	// 					info: '打卡'
	// 				},
	// 				{
	// 					date: getDate(new Date(),-2).fullDate,
	// 					info: '签到',
	// 					data: {
	// 						custom: '自定义信息',
	// 						name: '自定义消息头'
	// 					}
	// 				},
	// 				{
	// 					date: getDate(new Date(),-1).fullDate,
	// 					info: '已打卡'
	// 				}]
	const change = function (e) {
		console.log('当前模式：' + e.type + ',状态：' + e.show);
	}
	const toggle = function (type1) {
		type.value = type1;
		popup.value.open(type1)
		//toRefs(popup.open(type1))
	}
	const open = () => {
		calendar.value.open()
	}
	const close = () => {
		console.log('弹窗关闭');
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	// const a = () => {
	// 	console.log(hhh);
	// 	hhh.value.click()
	// }
	// const open = () => {
	// 	console.log(popupRef.value);
	// 	if (popupRef.value && popupRef.value.open) {
	// 		popupRef.value.open('bottom');
	// 	}
	// 	// this.$refs.popup.open('top')
	// }
</script>

<style lang="less">
	page {
		background-color: #f3f3f3;
	}

	.pay {
		background-color: #fff;
		width: 740rpx;
		margin: auto;

		.pay1 {
			height: 88rpx;
			border-bottom: 1rpx solid #eee;
			line-height: 88rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			text {
				margin-left: 20rpx;
			}

			.text1 {
				margin-left: 220rpx;

				text {
					margin-left: 0;
				}
			}

			.uni-icons {
				font-size: 38rpx !important;
				color: #bcbcbc !important;
				margin-right: 20rpx;
				font-weight: bold;
			}
		}

		.pay1-1 {
			color: red;
		}
	}

	.exmin {
		height: 820rpx;
		background-color: #fff;
		width: 740rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		margin: auto;
		margin-top: 20rpx;

		.exmin1 {
			height: 88rpx;
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;

			text {
				margin-left: 20rpx;
			}

			.text1 {
				text {
					margin-left: 0;
				}
			}

			.uni-icons {
				font-size: 38rpx !important;
				color: #bcbcbc !important;
				margin-right: 20rpx;
				font-weight: bold;
			}
		}
	}

	.popup-content {

		.popup-content1 {
			background-color: #fff;
			width: 700rpx;
			margin: auto;
			border-radius: 20rpx 20rpx 14rpx 14rpx;

			.header {
				height: 114rpx;
				// width: 700rpx;
				background-color: #fff;
				margin: auto;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				border-bottom: 1rpx solid #eee;
				text-align: center;
				line-height: 114rpx;
				font-size: 25rpx;
				color: #bcbcbc;
			}

			.min {
				height: 114rpx;
				border-bottom: 3rpx solid #eee;
				line-height: 114rpx;
				text-align: center;
			}
		}

		.button {
			width: 700rpx;
			height: 114rpx;
			background-color: #fff;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 114rpx;
			color: #349d00;
			font-size: 36rpx;
		}

	}

	.buttons {
		position: fixed;
		bottom: 0;

		.button2 {
			height: 96rpx;
			width: 750rpx;
			background-color: #349d00;
			color: #fff;
			text-align: center;
			line-height: 96rpx;
		}
	}
</style>